<template>
  <view class="formBox">
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="top"
      label-width="150"
    >
      <template v-if="type === 'edit'">
        <uni-forms-item label="楼层" required name="floorId">
          <view
            >{{ formData.building
            }}{{ formData.floor ? `/${formData.floor}` : '' }}</view
          >
        </uni-forms-item>
        <uni-forms-item label="空间" required name="spaceId">
          <uni-data-picker
            placeholder="请选择空间"
            popup-title="请选择"
            :localdata="treeData"
            v-model="formData.spaceId"
          >
          </uni-data-picker>
        </uni-forms-item>
        <uni-forms-item label="房间号" required name="roomNo">
          <uni-easyinput v-model="formData.roomNo" placeholder="请输入" />
        </uni-forms-item>
      </template>
      <template v-if="type === 'checkIn'">
        <uni-forms-item label="床号" required name="bedId">
          <uni-data-select
            placeholder="请选择"
            :localdata="emptyData"
            v-model="formData.bedId"
          />
        </uni-forms-item>
        <uni-forms-item label="入住日期" required name="checkInDate">
          <uni-datetime-picker
            type="date"
            :start="new Date().getTime()"
            v-model="formData.checkInDate"
          />
        </uni-forms-item>
        <uni-forms-item label="预计退房日期" name="checkOutDate">
          <uni-datetime-picker
            type="date"
            :start="new Date().getTime()"
            v-model="formData.checkOutDate"
          />
        </uni-forms-item>
        <uni-forms-item label="入住事由" required name="bedProcessCause">
          <uni-easyinput
            v-model="formData.bedProcessCause"
            placeholder="请输入"
          />
        </uni-forms-item>
        <uni-forms-item label="入住类型" required name="checkInType">
          <uni-data-select
            placeholder="请选择"
            :localdata="checkInType"
            v-model="formData.checkInType"
          />
        </uni-forms-item>
        <uni-forms-item label="姓名" name="checkInName">
          <uni-easyinput v-model="formData.checkInName" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="所在部门" required name="checkInDept">
          <uni-easyinput v-model="formData.checkInDept" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="联系电话" name="checkInPhone">
          <uni-easyinput v-model="formData.checkInPhone" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="陪同人员姓名" name="goWithName">
          <uni-easyinput v-model="formData.goWithName" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="陪同人员所在部门" name="goWithDeptId">
          <!-- <uni-easyinput v-model="formData.goWithDeptId" placeholder="请输入" /> -->
          <uni-data-picker
            placeholder="请选择陪同人员所在部门"
            popup-title="请选择陪同人员所在部门"
            :localdata="$util.processingTree(deptData, 'value', 'parentId')"
            @change="changeDept"
            v-model="formData.goWithDeptId"
          />
        </uni-forms-item>
        <uni-forms-item label="陪同人员联系方式" name="goWithPhone">
          <uni-easyinput v-model="formData.goWithPhone" placeholder="请输入" />
        </uni-forms-item>
      </template>
      <template v-if="type === 'checkOut'">
        <uni-forms-item label="床号" required name="bedId">
          <uni-data-select
            placeholder="请选择"
            :localdata="rzData"
            v-model="formData.bedId"
          />
        </uni-forms-item>
        <uni-forms-item label="退房日期" name="checkOutDate">
          <uni-datetime-picker
            type="date"
            :start="new Date().getTime()"
            v-model="formData.checkOutDate"
          />
        </uni-forms-item>
        <uni-forms-item label="退房事由" required name="bedProcessCause">
          <uni-easyinput
            v-model="formData.bedProcessCause"
            placeholder="请输入"
          />
        </uni-forms-item>
      </template>
      <template v-if="type === 'replace'">
        <uni-forms-item label="换出床号" required name="bedId">
          <uni-data-select
            placeholder="请选择"
            :localdata="rzData"
            v-model="formData.bedId"
          />
        </uni-forms-item>
        <uni-forms-item label="换入床号" required name="replaceInBedId">
          <uni-data-select
            placeholder="请选择"
            :localdata="emptyData"
            v-model="formData.replaceInBedId"
          />
        </uni-forms-item>
        <uni-forms-item label="事由" required name="bedProcessCause">
          <uni-easyinput
            v-model="formData.bedProcessCause"
            placeholder="请输入"
          />
        </uni-forms-item>
      </template>
      <template v-if="type === 'updateRoom'">
        <uni-forms-item label="用途" required name="roomFunction">
          <uni-data-select
            placeholder="请选择"
            :localdata="roomFunction"
            v-model="formData.roomFunction"
          />
        </uni-forms-item>
        <uni-forms-item label="类型" required name="roomType">
          <uni-data-select
            placeholder="请选择"
            :localdata="roomType"
            v-model="formData.roomType"
          />
        </uni-forms-item>
      </template>
    </uni-forms>
    <button class="btn" type="primary" @click="onSubmit('valiForm')">
      提交
    </button>
  </view>
</template>

<script>
import _ from 'lodash';
import { getSpaceList, getDeptList } from '@/api/index';
import { getRzBedList, getEmptyBedList } from '@/api/room';
import useAppStore from '@/store/modules/app';
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      deptData: [],
      checkInType: [
        {
          label: '职工',
          text: '职工',
          value: '1',
        },
        {
          label: '外来招待',
          text: '外来招待',
          value: '2',
        },
      ],
      roomFunction: [
        {
          label: '职工住宿',
          text: '职工住宿',
          value: '1',
        },
        {
          label: '功能',
          text: '功能',
          value: '2',
        },
        {
          label: '外来招待',
          text: '外来招待',
          value: '3',
        },
      ],
      roomType: [
        {
          label: '单人间',
          text: '单人间',
          value: '1',
        },
        {
          label: '双人间',
          text: '双人间',
          value: '2',
        },
        {
          label: '三人间',
          text: '三人间',
          value: '3',
        },
        {
          label: '四人间',
          text: '四人间',
          value: '4',
        },
        {
          label: '五人间',
          text: '五人间',
          value: '5',
        },
        {
          label: '六人间',
          text: '六人间',
          value: '6',
        },
        {
          label: '七人间',
          text: '七人间',
          value: '7',
        },
        {
          label: '夫妻间',
          text: '夫妻间',
          value: '12',
        },
        {
          label: '套间',
          text: '套间',
          value: '11',
        },
      ],
      rzData: [],
      treeData: [],
      emptyData: [],
      // 表单数据
      formData: {},
      // 规则
      rules: {
        checkInDept: {
          rules: [
            {
              required: true,
              errorMessage: '请输入内容',
            },
          ],
        },
        bedProcessCause: {
          rules: [
            {
              required: true,
              errorMessage: '请输入内容',
            },
          ],
        },
        bedId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        replaceInBedId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        checkInType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        checkInDate: {
          rules: [
            {
              required: false,
              errorMessage: '请选择时间',
            },
          ],
        },
        checkOutDate: {
          rules: [
            {
              required: false,
              errorMessage: '请选择时间',
            },
          ],
        },
        checkInPhone: {
          rules: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码',
            },
          ],
        },
        goWithPhone: {
          rules: [
            {
              required: false,
              errorMessage: '内容不能为空',
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码',
            },
          ],
        },
        roomType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        roomFunction: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
      },
      // store
      appStore: useAppStore(),
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (!_.isEmpty(newVal)) {
          // 数据合并
          this.formData = Object.assign({}, this.formData, newVal);
          // 获取数据
          this.initData();
        }
      },
      immediate: true,
      deep: true,
    },
    type: {
      handler(newVal) {
        if (this.type === 'checkIn') {
          this.formData.checkInDate = this.$util.timestampToTime(
            new Date().getTime(),
            'YYYY-MM-DD'
          );
          getDeptList().then((res) => {
            this.deptData = res.data.map((item) => {
              return {
                text: item.deptName,
                label: item.deptName,
                value: item.deptId,
                parentId: item.parentId,
              };
            });
          });
        } else if (this.type === 'checkOut') {
          this.formData.checkOutDate = this.$util.timestampToTime(
            new Date().getTime(),
            'YYYY-MM-DD'
          );
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {
    // 初始数据
    initData() {
      getSpaceList().then((res) => {
        let data = res.data.map((item) => {
          return {
            ...item,
            text: item.spaceName,
            value: item.spaceId,
          };
        });
        this.treeData = this.$util.processingTree(data, 'spaceId', 'parentId');
      });
      getRzBedList({
        roomId: this.formData.roomId,
      }).then((res) => {
        this.rzData = res.data.map((item) => {
          return {
            ...item,
            text: `${item.roomNo}室${item.bedNo}床/${item.checkInName}(${item.checkInDept})`,
            value: item.bedId,
          };
        });
      });
      getEmptyBedList({
        // roomId: this.formData.roomId,
      }).then((res) => {
        this.emptyData = res.data.map((item) => {
          return {
            ...item,
            label: `${item.building}/${item.roomNo}室${item.bedNo}床`,
            text: `${item.building}/${item.roomNo}室${item.bedNo}床`,
            value: item.bedId,
          };
        });
      });
    },
    changeDept(data) {
      console.log(data.detail.value);
      this.formData.goWithDept =
        (data.detail.value.length &&
          data.detail.value[data.detail.value.length - 1].text) ||
        '';
      console.log(this.formData.goWithDept);
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$emit('callback', {
            ...res,
            goWithDept: this.formData.goWithDept,
          });
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  max-height: 70vh;
  padding: 60rpx 48rpx 100rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  overflow: auto;
  .uni-forms {
    min-height: 38vh;
  }
}
</style>
